<template>
  <el-header style="height: 80px">
    <div class="left">
      <h3>叩丁狼电商运营平台</h3>
      <i @click="changeMenuCollapse" class="el-icon-menu"></i>
    </div>
    <el-dropdown @command="commandHandle">
      <span class="el-dropdown-link">
        {{ $store.state.userInfo.username }}
        <i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item command="home">首页</el-dropdown-item>
        <el-dropdown-item command="logout">退出</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </el-header>
</template>
 
<script>
import { SET_USER_INFO } from '@/store/types'
import { resetRouter } from '@/router'
export default {
  data() {
    return {

    }
  },
  methods: {
    changeMenuCollapse() {
      //   修改父组件里面的 menuCollapse
      this.$emit('changemenucollapse')
    },
    commandHandle(com) {
      switch (com) {
        case 'home':
          this.gotoHome()
          break;
        case 'logout':
          this.logout()
          break;
        default:
          break;
      }
    },
    gotoHome() {
      this.$router.push('/index')
    },
    logout() {
      // 1. 删除token
      localStorage.removeItem('token')
      // 2. 把vuex的数据清空
      this.$store.commit(SET_USER_INFO, {})
      // 3. 把路由对象的匹配规则重置
      resetRouter()
      // 3. 跳转到登录页
      this.$router.push('/login')
    }
  }
}
</script>
 
<style lang = "less" scoped>
.el-header {
  background: #409eff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .left {
    display: flex;
    align-items: center;
    h3 {
      font-size: 24px;
      line-height: 80px;
      color: #fff;
    }
    i {
      color: #fff;
      margin-left: 20px;
      font-size: 20px;
      cursor: pointer;
    }
  }
  .el-dropdown {
    span {
      color: #fff;
    }
  }
}
</style>